<template>
  <div>
    <bread>
      <h1>科研绩效考核</h1>
      <div class="pull-right">
        <el-button size="small" class="custom-button" plain>考核配置</el-button>
      </div>
    </bread>
    <pageContent hasPagination>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        header-row-class-name="custom-table-header">
        <el-table-column
          label="序号"
          type="index"
          width="100">
        </el-table-column>
        <template v-for="item in tableHead">
          <template v-if="item.en == 'a'">
            <el-table-column
              :label="item.cn"
              :key="item.en"
              :width="getColumnWidth(item)">
              <template slot-scope="scope">
                <router-link to="/index/research-assessment/assessment-list/id/91">{{scope.row.a}}</router-link>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.en == 'd'">
            <el-table-column
              :label="item.cn"
              :key="item.en"
              :width="getColumnWidth(item)">
              <template slot-scope="scope">
                <template v-if="scope.row.d">
                  已结束
                </template>
                <template v-else>
                  <span class="primary-color">进行中</span>
                </template>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :prop="item.en"
              :label="item.cn"
              :key="item.en"
              :width="getColumnWidth(item)">
            </el-table-column>
          </template>
        </template>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <router-link to="/index/research-assessment/assessment-list/id/91">查看</router-link>
          </template>
        </el-table-column>
      </el-table>
    </pageContent>

    <pagination
      :total="total"
      :page-size="pageSize"
      @changePage="fetchData">
    </pagination>
  </div>

</template>

<script>
import pagination from 'components/pagination';

export default {
  name: 'hello',
  data () {
    return {
      tableHead: [
        {
          cn: '考核周期',
          en: 'a',
        },
        {
          cn: '周期类型',
          en: 'b',
        },
        {
          cn: '提交周期',
          en: 'c',
        },
        {
          cn: '状态',
          en: 'd',
        },
        {
          cn: '创建时间',
          en: 'e',
        },
        {
          cn: '备注',
          en: 'f',
        },
      ],
      tableData: [
        {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        }, {
          a: '2017-01-01至2017-12-31',
          b: '自然年',
          c: '2018-01-01至2018-02-01',
          d: 1,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        },
        {
          a: '2017-07-01至2017-12-31',
          b: '自然半年',
          c: '2017-01-01至2017-02-01',
          d: 0,
          e: '2017-12-01',
          f: '-',
          g: '查看'
        },
      ],
      total: 1000,
      pageSize: 30,
    }
  },
  methods: {
    getColumnWidth(item) {
      switch (item.en) {
      case 'b':
        return 120;
      case 'd':
        return 100;
      case 'e':
        return 146;
      }
    },
    fetchData(page) {
      // console.log(page);
    }
  },
  components: {
    pagination,
  }
};
</script>
<style scoped lang="scss">
  .primary-color {
    color: var(--success-color);
  }
</style>
